<template>
  <div class="box1">
    <h3 class="title"><i class="el-icon-s-promotion" />地产分类</h3>

  <el-card
    :body-style="{padding:'0',margin:'0'}"
    v-for="item in tableData"
    :key="item.id"
    >
      <el-row  type="flex" justify="start">
        <!-- 左边图片 -->
      <div class="left">
        <img :src="item.image" alt="">
      </div>
      <!-- 右边文本 -->
      <div class="right">
        <h3>{{item.title}}</h3>
        <span>{{item.desc}}</span>
      </div>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getHotel } from '@/api/hotel'
export default {
  //   name: 'Hotel'
  data () {
    return {

      tableData: []

    }
  },
  created () {
    this.getHotelList()
  },
  methods: {
    async getHotelList () {
      const res = await getHotel()
      console.log(50, res)
      this.tableData = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
.box1 {
  padding-left: 150px;
  padding-right: 150px;
.title{

    display: flex;
    justify-content: start;
    color: orange;
  }
  >span{
    color: #ead4a6;
    line-height: 20px;
    margin-right: 700px;
 }
.el-card{
  // height: 200px;
  // width: 775px;
  margin-top: 10px;
  .el-row{
    height: 200px;
    .left{
    width: 30%;
    height: 200px;
    border-right: 1px solid #e7e5e8;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      display:block;
      height: 180px;
      width: 150px;
      margin: 10px auto;

    }

   }
   .right{
    flex: 1;
    line-height: 40px;
   }
  }
 }
 .block{
  margin: 20px 0;
 }
}
</style>
